<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/views1/DTD/views1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">
	<ui:composition template="/views/layout/main.xhtml">
		<ui:define name="conteudo">
			<style>
				td{
					padding: 10px;
				}
				.codigoQuestao{
					width: 97.3%;
					padding: 5px;
					margin-top: 20px;
				}
				.descricaoQuestao{
					width: 97.3%;
					padding: 5px;
				}
				.alternativasQuestao{
					width: 99%;
					padding: 5px;
					background-color: lightgray;
				}
				.alternativaCorreta{
					width: 100%;
					height: 100%;
					background-color: #4dd14d;
				}
				.alternativaErrada{
					width: 100%;
					height: 100%;
					background-color: #ff865e;
				}
			</style>
			<h:form id="formPrincipal">
				<div class="grid_2">
					<p:commandButton ajax="false" action="#{realizarProvaBean.voltarVisualizarResultado}" value="Sair" immediate="true"/>
				</div>
				<div class="grid_6">
					<p>
						<h:outputText value="Disciplina: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.disciplina.nome}"/>
					</p>
					<p>
						<h:outputText value="Professor: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.professor.nomeCompleto}"/>
					</p>
					<p>
						<h:outputText value="Ano/Semestre: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.ano}">
							<f:convertDateTime pattern="yyyy"/>
						</h:outputText>
						<h:outputText value="/"/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.semestre}"/>
					</p>
				</div>
				<div class="grid_5">
					<p>
						<h:outputText value="Número de Questões: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoes}"/>
					</p>
					<p>
						<h:outputText value="Questões Respondidas: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoesRespondidas}"/>
					</p>
					<p>
						<h:outputText value="Questões em Branco: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoesBranco}"/>
					</p>
				</div>
				<div class="grid_5">
					<p>
						<h:outputText value="Início: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.dataHoraInicio}">
							<f:convertDateTime pattern="HH:mm - dd/MMM/yy"/>
						</h:outputText>
					</p>
					<p>
						<h:outputText value="Término: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.dataHoraFim}">
							<f:convertDateTime pattern="HH:mm - dd/MMM/yy"/>
						</h:outputText>
					</p>
					<div id="elemento">
						<h:inputHidden id="ano" value="#{realizarProvaBean.ano}"/>
						<h:inputHidden id="mes" value="#{realizarProvaBean.mes}"/>
						<h:inputHidden id="dia" value="#{realizarProvaBean.dia}"/>
						<h:inputHidden id="horas" value="#{realizarProvaBean.horas}"/>
						<h:inputHidden id="minutos" value="#{realizarProvaBean.minutos}"/>
					</div>
				</div>
				<div class="grid_18">
					<p:dataGrid var="model"
								value="#{realizarProvaBean.questaoList}"
								columns="1"
								id="gridQuestoes"
								>
						<p:column>
							<div class="grid_18">
								<p class="ui-widget-header ui-corner-all codigoQuestao" style="text-align: left;">
									<h:outputText value="Questão: #{model.codigo}"/>
								</p>
								<p class="ui-state-default ui-corner-all descricaoQuestao">
									<h:outputText escape="false" value="#{model.descricao}"/>
								</p>
								<p:spacer height="5px"/>
								<p>
									<p:dataTable 
												 value="#{model.alternativas}" 
												 var="alternativa" 
												 style="width: 99%;">
										<p:column headerText="Alternativas">
											<h:panelGroup rendered="#{model.alternativaCorreta.id == alternativa.id and (model.alternativaEscolhida.id == alternativa.id)}">
												<div class="">
													#{alternativa.texto}
												</div>
											</h:panelGroup>
											<h:panelGroup rendered="#{model.alternativaCorreta.id != alternativa.id and (model.alternativaEscolhida.id == alternativa.id)}">
												<div class="">
													#{alternativa.texto}
												</div>
											</h:panelGroup>
											<h:panelGroup rendered="#{model.alternativaCorreta.id != alternativa.id and (model.alternativaEscolhida.id != alternativa.id)}">
												#{alternativa.texto}
											</h:panelGroup>
											<h:panelGroup rendered="#{model.alternativaCorreta.id == alternativa.id and (model.alternativaEscolhida.id != alternativa.id)}">
												#{alternativa.texto}
											</h:panelGroup>
										</p:column>
										<p:column style="width: 50px;height: 0px;">
											<center>
												<h:panelGroup rendered="#{model.alternativaCorreta.id == alternativa.id and (model.alternativaEscolhida.id == alternativa.id)}">
													<div class="alternativaCorreta">
														<h:outputText rendered="#{model.alternativaEscolhida.id == alternativa.id}" value="Correta"/>
													</div>
												</h:panelGroup>
												<h:panelGroup rendered="#{model.alternativaCorreta.id != alternativa.id and (model.alternativaEscolhida.id == alternativa.id)}">
													<div class="alternativaErrada">
														<h:outputText rendered="#{model.alternativaEscolhida.id == alternativa.id}" value="Errada"/>
													</div>
												</h:panelGroup>
											</center>
										</p:column>
									</p:dataTable>
								</p>
							</div>
						</p:column>
						
					</p:dataGrid>
				</div>
			</h:form>
		</ui:define>
	</ui:composition>
</f:view>